<template>
  <div :style="{ width: width == null ? 'auto' : width + 'px' }">
    <v-chart :forceFit="width == null" :height="height" :data="data" padding="0">
      <v-tooltip />
      <v-bar position="x*y" />
    </v-chart>
  </div>
</template>

<script>
import moment from 'dayjs'

const sourceData = []
const beginDay = new Date().getTime()
const status = [
  { x: '已支付', y: 0 },
  { x: '未支付', y: 0 },
  { x: '待派送', y: 0 },
  { x: '已送达', y: 0 },
  { x: '已完成', y: 0 },
  { x: '待评价', y: 0 },
  { x: '已评价', y: 0 },
  { x: '已取消', y: 0 },
]

const tooltip = [
  'x*y',
  (x, y) => ({
    name: x,
    value: y,
  }),
]

const scale = [
  {
    dataKey: 'x',
    min: 2,
  },
  {
    dataKey: 'y',
    title: '时间',
    min: 1,
    max: 30,
  },
]
import { getAction,get } from '../../api/manage'
export default {
  name: 'MiniBar',
  props: {
    dataSource: {
      type: Array,
      default: () => [],
    },
    width: {
      type: Number,
      default: null,
    },
    height: {
      type: Number,
      default: 200,
    },
  },
  created() {
    if (this.dataSource.length === 0) {
      this.data = sourceData
    } else {
      this.data = this.dataSource
    }
  },
  data() {
    return {
      tooltip,
      data: [],
      scale,
      orderList: [],
    }
  },
  methods: {
    getAllorderAndSetStatus() {
      get('/schoolOrder/web/selectAllOrder').then((res) => {
        //this.orderList = JSON.parse(JSON.stringify(res.result));
        this.orderList = res.data;
        for(let i=0; i<this.orderList.length; i++){
          status[(this.orderList[i].status-0)-1].y++;
        };
        for (let i = 0; i < 8; i++) {
          var total = total + status[i].y;
          sourceData.push({
            x: status[i].x,
            y: status[i].y,
          })
        };
      })
    },
  },
  mounted() {
     this.getAllorderAndSetStatus();
  },
}
</script>

<style lang="less" scoped>
@import 'chart';
</style>